// 问诊消息
<template>
  <div class="InterrogatoionBox">
    <div v-for="item in item1" :key="item.id" class="InterrogatoionBox1">
      <div class="InterrogatoionTitle">{{ item.title }}</div>
      <p>{{ item.age }}</p>
      <button>{{ item.num }}</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const item1 = ref([
  {
    id: 1,
    title: "您对医生小小美的咨询有了新的回复!",
    age: "2019年3月10日   17:21",
    num: "立即查看",
  },
  {
    id: 2,
    title: "您对医生的咨询有了新的回复!",
    age: "2019年2月20日   10:17",
    num: "立即查看",
  },
  {
    id: 3,
    title: "您对医生小美的咨询有了新的回复!",
    age: "2019年2月18日   14:20",
    num: "立即查看",
  },
  {
    id: 4,
    title: "您对医生小小美的咨询有了新的回复哦!",
    age: "2019年2月12日   16:13",
    num: "立即查看",
  },
  {
    id: 5,
    title: "您对医生小小美的咨询有了回复!",
    age: "2019年2月10日   15:33",
    num: "立即查看",
  },
]);
</script>

<style lang="scss">
.InterrogatoionBox {
  width: 100%;
  height: 100%;
}
.InterrogatoionBox1 {
  width: 90%;
  height: 100px;
  margin: 20px 10px auto;
}
.InterrogatoionTitle {
  font-size: 16px;
}
.InterrogatoionBox1 p {
  width: 160px;
  position: relative;
  left: 60px;
  top: 30px;
}
.InterrogatoionBox1 button {
  position: relative;
  left: 260px;
  bottom: 10px;
}
</style>